<template>
    <div id="Showblogcontent" >
        <article class="Showblogcontent-content" v-for="(item,index) in bokecontentinquire" :key="index">
            <p>{{item.fields.title}}</p>
            <figure class="Showblogcontent-onecontent">
                <div class="Showblogcontent-onecontenttitle">
                    <div class="Showblogcontent-onecontenttitletype">{{item.fields.addtype}}</div>
                </div>
                <table>
                    <tbody>
                        <tr>
                            <td class="Showblogcontent-onecontentnumtd">
                                    <div v-for="(iqes,indexs) in iqe.split('\n')" :key="indexs">
                                    <span>{{indexs}}</span>
                                    <br>
                                    </div>
                                    
                            </td>
                            <td class="Showblogcontent-onecontent-contenttd">
                                    <div v-for="(iqes,indexs) in iqe.split('\n')" :key="indexs">
                                    <span>{{iqes}}</span>
                                    <br>
                                    </div>
                                    
                            </td>
                        </tr>
                    </tbody>
                </table>
            </figure>
            <showblogcontentimg :contentimg="contentimg"></showblogcontentimg>
        </article>
    </div>
</template>

<script>
import {requestGetn} from '../api/requestPost'
import showblogcontentimg from './showblogcontentimg.vue'
export default {
    name:'Showblogcontent',
    components: {
        showblogcontentimg,
    },
    data () {
        return {
            bokecontentinquire:null,
            iqe:null,
            contentimg:null,
        }
    },
    created () {
        // console.log('route传参',this.$route.query.id);
        // console.log('route传参',this.$route.query.id);
        requestGetn('bokecontent/inquire/',{inquire:this.$route.query.id}).then(res=>{
            // console.log(res.data.return)
            this.bokecontentinquire=res.data.return
            
            for (var i in this.bokecontentinquire){
                // console.log(this.bokecontentinquire[i].fields.content)
                this.iqe=this.bokecontentinquire[i].fields.content.toString()//添加查询到的内容到数组里面去
                this.contentimg=this.bokecontentinquire[i].fields.explain.toString()
                
                
                // this.bokecontentinquirecontent.push(iqe)
                // console.log(this.bokecontentinquirecontent)
            }
        })
        
    }
   
}
</script>

<style>
    :root{
        --Showblogcontent-bg:#212121;
        --Showblogcontent-color:#eff;
    }
    
    .Showblogcontent-onecontent-contenttd{
        font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
        border: 1px solid var(--Showblogcontent-color);
        vertical-align: middle;
        margin: 8px 10px;
        border: none;
        padding: 6px 12px;
    }
    .Showblogcontent-onecontent table td{
        padding: 0;
        vertical-align: middle;
        border: none;
        display: inline-block;
    }
    .Showblogcontent-onecontentnumtd{
        text-align: right;
        color: #879090;
        font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
        margin: 8px 10px;
        padding: 6px 12px;
        border: 1px solid var(--Showblogcontent-color);
        vertical-align: middle;
        padding: 0;
        border: none;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select:none;
        vertical-align: middle;
    }
    .Showblogcontent-onecontent table{
        
        display: block;
        overflow: auto;
        display: table;
        table-layout: fixed;
        width: 100%;
        border-spacing: 0;
        
        border: none;
        empty-cells: show;
        border-collapse: collapse;

    }
    .Showblogcontent-onecontenttitletype{
        left:75px;
        position: absolute;
        text-transform: uppercase;
        font-size: 1.15em;
        font-weight: bold;
        -moz-user-select:none;/*火狐*/

        -webkit-user-select:none;/*webkit浏览器*/

        -ms-user-select:none;/*IE10*/

        -khtml-user-select:none;/*早期浏览器*/
        user-select: none;
    }
    
    .Showblogcontent-onecontenttitle{
        position: relative;
        display: -webkit-box;
        display: --moz-box;
        display: -ms-flexbox;
        display: box;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -o-box-align:center;
        -ms-flex-align: center;
        -webkit-box-items:center;
        align-items: center;
        overflow: hidden;
        height: 2.15em;
        background: #1c1c1c;
        color: rgba(238,255,255,0.8);
        font-size: 14px;
    }
    .Showblogcontent-content{
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .Showblogcontent-onecontenttitle::after{
        position: absolute;
        left: 14px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #fc625d;
        box-shadow: 20px 0 #fdbc40,40px 0 #35cdb4;
        box-shadow: 20px 0 #fdbc40,40px 0 #35cdb4;
        content: '';
    }
    
    .Showblogcontent-content p {
        margin: 0 0 16px;
    }
    .Showblogcontent-onecontent{
        
        position: relative;
        overflow: auto;
        padding: 0;
        background:var(--Showblogcontent-bg) ;
        color: var(--Showblogcontent-color);
        line-height: 1.6;
        margin: 0 0 24px;
        border-radius: 7px;
        -webkit-box-shadow:0 5px 10px 0 rgb(0 0 0 / 40%);
        box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%);
        /* -webkit-transform: translateZ(0); */
    }
</style>